<!-- 修改完成的名片 -->
<template>
  <view class="container screen-width">
    <topBar :title="titleItem" />
    <view class="makeCard flex flex-center">
      <image mode="widthFix" class="card-bg" src="../../static/card-04.png" />
      <view class="userCard">
        <view class="company-name flex space-between flex-end">{{ userCard.companyName || '' }}</view>
        <view class="user-info flex space-between flex-end">
          <view class="company flex flex-col items-middle">
            <image v-if="userCard.avatar" class="photo" :src="$imgUrl + userCard.avatar" />
            <image v-else class="photo" src="https://m.51bmj.cn/mobile/editCard.png" />
            <view class="name-box">
              <view class="name">{{ userCard.name || '' }}</view>
              <!-- <view class="companyName">{{ userCard.companyName || '' }}</view> -->
              <view class="position">{{ userCard.position ? userCard.position : '暂未填写职位' }}</view>
              <view class="synopsis">{{ userCard.synopsis ? userCard.synopsis : '暂未填写简介' }}</view>
            </view>
          </view>
          <!--  -->
          <view class="info flex flex-col flex-end">
            <view class="lable flex items-middle">
              <VIcon class="icon" type="icon-dianhua" color="#6574C5" size="30" />
              <text>{{ userCard.phoneNumber || '暂未填写联系电话' }}</text>
            </view>
            <view class="lable flex items-middle">
              <VIcon class="icon" type="icon-email-s" color="#6574C5" size="30" />
              <text>{{ userCard.email || '暂未填写联系邮箱' }}</text>
            </view>
            <view class="lable flex items-top">
              <VIcon class="icon" type="icon-dizhi" color="#6574C5" size="30" />
              <text class="address">{{ userCard.companyAddress || '暂未填写公司地址' }}</text>
            </view>
          </view>
          <!--  -->
        </view>
      </view>
    </view>
    <view class="territory">
      <view class="territory_area">
        <view class="title flex items-middle">
          <view class="dot" />
          <text>业务领域</text>
        </view>
        <view class="content">{{ userCard.territory ? userCard.territory : '未填写' }}</view>
      </view>
      <view class="territory_area">
        <view class="title flex items-middle">
          <view class="dot" />
          <text>合作需求</text>
        </view>
        <view class="content">{{ userCard.cooperationDemand ? userCard.cooperationDemand : '未填写' }}</view>
      </view>
      <view class="territory_area">
        <view class="title flex items-middle">
          <view class="dot" />
          <text>公司简介</text>
        </view>
        <view class="content">{{ userCard.companyProfile ? userCard.companyProfile : '未填写' }}</view>
      </view>
      <view class="territory_area">
        <view class="title flex items-middle">
          <view class="dot" />
          <text>宣传相册</text>
        </view>
        <image
          v-for="(item, index) in userCard.photoAlbum"
          v-show="userCard.photoAlbum != null"
          :key="index"
          mode="widthFix"
          :src="$imgUrl + item"
          @click="previewImage(index, userCard.photoAlbum)"
        />
        <text v-show="userCard.photoAlbum == null" class="content">暂无图片</text>

        <view />
      </view>
    </view>

    <view class="share screen-width">
      <view @tap="toMyCard" class="ceateCard">我的名片</view>
      <view class="enterprise"> <image src="../../static/userCard/qy.png" @tap="companyDetails" />企业详情 </view>
      <view class="collect"> <image src="../../static/userCard/sc.png" @tap="collectCard" />收藏名片 </view>
      <!-- <view class="collect">
				<image src="../../static/userCard/tongxun.png" mode="" @tap="collectCard" />保存通讯录
      </view>-->
      <wx-open-launch-weapp id="launch-btn" appid="wxa702cd88beea7973" username="gh_b83594dfd921" :path="'pages/card/detailCard/Index?id=' + options.id">
        <script type="text/wxtag-template">
          <style>.collect { font-size: 12px;
          		justify-content: space-around;
          		align-items: center;
          		display: flex;
          		flex-direction: column;
          		width: 60px;
          		height: 50px; }
          		.tongxun{
          			height: 19px;
          			width: 19px;
          		}
          		.text-tongxun{
          			font-size: 12px;
          		}</style>
          <view class="collect">
          		<img class="tongxun" src="https://dm-bmj.oss-cn-guangzhou.aliyuncs.com/static/tongxun.png"/>
          		<view class="text-tongxun">保存通讯录</view>
          	</view>
        </script>
      </wx-open-launch-weapp>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
  import topBar from '../../components/topBar.vue' // 获取导航栏
  import { imgUrl } from '@/util/api.js'
  import { isWeixin, wxShareConfig } from 'util/wx.js'
  export default {
    components: {
      topBar,
    },
    data() {
      return {
        titleItem: '名片详情',
        userCard: '', // 用户名片
        options: {}, // 用户id
        imgUrl: imgUrl,
      }
    },
    created() {
      this.getuserCard()
    },
    onLoad(option) {
      this.options = option
    },
    methods: {
      // 预览图片多张
      previewImage(index, photoImg) {
        let photoList = photoImg.map(item => {
          let newImg = this.imgUrl + item
          return newImg
        })
        WeixinJSBridge.invoke('imagePreview', {
          urls: photoList,
          current: index,
        })
      },

      toMyCard() {
        let token = this.$getToken()
        if (!token) {
          uni.showToast({
            title: '请登录后,再操作',
            duration: 2000,
            iocn: 'none',
          })
          uni.setStorageSync('pageUrl', window.location.href)
          uni.navigateTo({
            url: '/pages/login/index',
          })
        } else {
          uni.redirectTo({
            url: '/pages/person/CardList',
          })
        }
      },
      getuserCard() {
        this.$get('/bmj-api/api/ums/umsBusinessCard/businessCardInfo?id=' + this.options.id).then(res => {
          if (res.code == 200 && res.message != null) {
            this.titleItem = res.result.name + '的名片'
            this.userCard = res.result
            if (this.userCard.id) {
              if (isWeixin()) {
                this.initShareConfig()
              }
            }
          } else if (res.code === 10012) {
            uni.showToast({
              title: '该名片已设置不可见',
              duration: 2000,
              icon: 'none',
            })
          } else {
            this.userCard = null
          }
        })
      },
      // 点击收藏名片
      collectCard() {
        let { id } = this.options
        this.$post('/bmj-api/api/ums/umsBusinessCard/collectBusinessCard', {
          id: id,
        }).then(res => {
          if (res.code == 10007) {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: 'none',
            })
          } else if (res.code == 200) {
            uni.showToast({
              title: res.message,
              duration: 2000,
              icon: 'none',
            })
          }
        })
      },
      initShareConfig() {
        let _this = this
        let windowurl = window.location.href.split('#')[0]
        uni.request({
          url: 'https://oldm.51bmj.cn/WeiXin/GetClientSign', //仅为示例，并非真实接口地址。
          data: {
            rawUrl: windowurl,
          },
          dataType: 'json',
          header: {
            'X-Requested-With': 'XMLHttpRequest',
          },
          method: 'GET',
          success: res => {
            if (res.statusCode == 200) {
              let { data } = res
              let shareInfo = {
                title: _this.userCard.name + '的名片',
                desc: '政策尽知 红利尽享',
                imgUrl: _this.userCard.avatar ? _this.imgUrl + _this.userCard.avatar : 'https://51bmj.cn/bmj.jpg',
                link: window.location.href,
              }
              wxShareConfig(this.$wx, data, shareInfo)
            }
          },
        })
      },

      // 去企业详情
      companyDetails() {
        if (this.userCard.companyId) {
          uni.navigateTo({
            url: `/pages/enterpriseDetails/brand_detail?id=${this.userCard.companyId}&type=1&liIndex=0&showNew=true`,
          })
        } else {
          uni.navigateTo({
            url: `/pages/enterpriseDetails/brand_detail?name=${this.userCard.companyName}&type=2&liIndex=0&showNew=true`,
          })
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  .container {
    .makeCard {
      width: 100%;
      position: relative;
      padding: 20upx 0;
      box-sizing: border-box;

      .card-bg {
        width: 100%;
        z-index: 9;
        // background-image: linear-gradient(to right, #23253E, #4C4F6E);
      }

      .userCard {
        position: absolute;
        top: 0;
        z-index: 99;
        border-radius: 20upx;
        width: 93%;
        margin: 30upx auto;
        height: 420upx;
        padding: 0 10upx;
        box-sizing: border-box;
        // background-image: linear-gradient(to right, #464459, #53535C);

        // background: rgba(255, 255, 255, 0.3);
        // background-image: linear-gradient(45deg, #6D6BED, #ebf8e1, #915DD8);
        background-image: linear-gradient(45deg, rgba(109, 107, 237, 0.3), rgba(235, 248, 225, 0.3), rgba(145, 93, 216, 0.3));

        border: 1px solid #fff;
        // border-image: radial-gradient(rgba(255, 255, 255, 0.1) 70%, #9B9DFF 130%) 3;
        // background: rgba(0, 0, 0, 0.7);
        // box-shadow: 0px 1px 7px 0px rgb(108, 238, 211);
        // box-shadow: 0 0 10px #00c6c2 inset;

        .company-name {
          font-size: 36upx;
          font-weight: 600;
          // font-style: oblique;
          text-shadow: 1px 1px 2px pink;
          // color: #0097FB;
          color: #718af4;
          // color: #00c6c2;
          position: absolute;
          top: 20upx;
          right: 10upx;
          width: 67%;
          overflow: hidden;
          text-overflow: ellipsis; //修剪文字，超过2行显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; //此处为上限行数
          -webkit-box-orient: vertical;
        }

        .user-info {
          width: 100%;
          padding: 15upx 0;
          box-sizing: border-box;
          margin-top: 20upx;

          .company {
            width: 35%;
            // padding: 30upx 0;
            // box-sizing: border-box;

            .name-box {
              text-align: center;
              // margin-left: 20upx;

              .name {
                font-size: 38upx;
                font-weight: 600;
                color: #6d6bed;
                // text-shadow: 1px 1px 2px pink;
                // color: #D3FBD8;
                // color: #00c6c2;
                margin-bottom: 10upx;
                // border-top: 1px solid #D3FBD8;
                // border-bottom: 1px solid #D3FBD8;
              }

              .companyName {
                font-size: 26upx;
                color: #718af4;
                margin-bottom: 10upx;
              }

              .position {
                font-size: 26upx;
                // color: #fff;
                // color: #D3FBD8;
                color: #444;
                margin-bottom: 10upx;
              }

              .synopsis {
                // color: #F8F8FF;
                // color: #D3FBD8;
                color: #555;
                font-size: 20upx;
                overflow: hidden;
                text-overflow: ellipsis; //修剪文字，超过2行显示省略号
                display: -webkit-box;
                -webkit-line-clamp: 2; //此处为上限行数
                -webkit-box-orient: vertical;
              }
            }

            .photo {
              width: 120upx;
              height: 120upx;
              border-radius: 50%;
              margin-bottom: 20upx;
              margin-top: 30upx;
            }
          }

          .info {
            width: 65%;
            padding: 0 20upx;
            box-sizing: border-box;

            .lable {
              font-size: 24upx;
              color: #6574c5;
              // color: #D3FBD8;
              margin-top: 20upx;
              position: relative;

              .icon::after {
                content: ' ';
                position: absolute;
                border-left: 4upx solid #6d6bed;
                top: 33upx;
                bottom: -20upx;
                left: 23upx;
                // background: #00c6c2;
                // background: #6D6BED;
                // width: 4upx;
                // height: 22upx;
              }

              .icon {
                margin: 0 10upx;
              }

              .address {
                overflow: hidden;
                text-overflow: ellipsis; //修剪文字，超过2行显示省略号
                display: -webkit-box;
                -webkit-line-clamp: 2; //此处为上限行数
                -webkit-box-orient: vertical;
              }
            }

            .lable:last-child .icon::after {
              content: ' ';
              position: absolute;
              height: 0upx;
            }
          }
        }
      }
    }

    .fun-btn {
      width: 100%;
      padding: 20upx 0;
      box-sizing: border-box;

      .btn {
        font-size: 26upx;
        color: #fff;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        // padding: 15upx 30upx;
        box-sizing: border-box;
        border-radius: 50upx;

        .text {
          margin-left: 10upx;
        }
      }

      .phone-btn {
        background-image: linear-gradient(to right, #21c197, #6cfacd);
      }

      .share-btn {
        background-image: linear-gradient(to right, #6d6bed, #915dd8);
      }
    }

    .territory {
      background-color: #fff;
      padding: 0 30upx 150upx 30upx;
      box-sizing: border-box;

      .territory_area {
        display: flex;
        flex-direction: column;
        margin-top: 20upx;

        .title {
          height: 48upx;
          color: #00b1ff;
          font-size: 30upx;
          font-weight: 500;
          margin-bottom: 20upx;

          .dot {
            width: 10upx;
            height: 10upx;
            background: #00daf2;
            border-radius: 50%;
            margin-right: 10upx;
          }
        }

        .content {
          color: #333333;
          font-size: 24upx;
          line-height: 36upx;
          padding: 15upx;
          box-shadow: 0px 1px 7px 0px rgba(132, 202, 187, 0.3);
        }

        image {
          width: 100%;
          // margin-right: 20upx;
          // max-width: 200upx;
          // height: 200upx;
        }
      }
    }

    .share {
      justify-content: space-around;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 140rpx;

      .ceateCard {
        width: 45%;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1678ff;
        font-size: 32rpx;
        color: #fff;

        image {
          max-width: 40rpx;
          height: 36rpx;
          margin-right: 20rpx;
        }
      }

      .enterprise {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        width: 13%;
        height: 100rpx;
        font-size: 24rpx;

        image {
          height: 38rpx;
          width: 38rpx;
        }
      }

      .collect {
        font-size: 24rpx;
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 13%;
        height: 100rpx;

        image {
          height: 38rpx;
          width: 38rpx;
        }
      }
    }
  }
</style>
